<template>
    <el-row style="width: 1200px;margin: 0 auto;display: flex;align-items: center;">
        <el-col :span="2">
            <img src="@/assets/imgs/logo.png" style="height: 70px;width: 70px;" />
        </el-col>
        <el-col :span="8">
            <div style="text-align: justify;width: 100%;padding-top: 25px;">
                <span style="margin-left: -20px;">全国一体化政务服务平台</span>
                <span class="span-txt"></span>
            </div>
            <div style="text-align: justify;width: 100%;font-size: 24px;font-weight: bold;">
                <span style="margin-left: -20px;">云阳县社会组织监管一件事</span>
                <span class="span-txt"></span>
            </div>
        </el-col>
        <el-col :span="5" style="text-align: center;">
            <span>重庆市&emsp;云阳县</span>
        </el-col>
        <el-col :span="9" style="text-align: right;">
            <div style="margin-top: 10px;">
                <a href="https://gjzwfw.www.gov.cn" target="_blank">国家政务服务平台</a>
                <span>丨</span>
                <a href="https://www.cq.gov.cn" target="_blank">重庆市人民政府</a>
                <!--        <span>丨</span>-->
                <!--        <el-popconfirm title="是否退出?"-->
                <!--                       width="220"-->
                <!--                       confirm-button-text="退出"-->
                <!--                       cancel-button-text="取消"-->
                <!--                       @confirm="loginOut">-->
                <!--          <template #reference>-->
                <!--            <a target="_blank">退出</a>-->
                <!--          </template>-->
                <!--        </el-popconfirm>-->
            </div>
            <div>
                <p style=" color: #333333;font-size: 14px;">{{ userInfo.userName }}&emsp;{{ userInfo.workNo
                    }}</p>
            </div>
        </el-col>
    </el-row>
</template>
<script>

import { useUserStore } from '@/store'

export default {

    data() {
        return {
            userInfo: undefined
        }
    },
    created() {
        const userStore = useUserStore()
        this.userInfo = userStore.userInfo
        this.userName = this.userInfo.userName
    },
    mounted() {
        // const script = document.createElement('script')
        // script.type = 'text/javascript'
        // script.src = 'https://zwykb.cq.gov.cn/images/zwykb_header.js'
        // script.onload = () => {
        //   console.log(window)
        // }
        // console.log(script)
        // document.head.appendChild(script)
        this.initScreen()
        window.onresize = () => {
            return (() => {
                this.initScreen()
            })()
        }
    },
    methods: {
        initScreen() {
            const winWidth = window.innerWidth;
            console.log(winWidth)
            const size = winWidth / 1920
            if (winWidth > 768 && winWidth < 1850) {
                document.body.style.zoom = size; //放大缩小相应倍数
            }
        },
        loginOut() {
            const userStore = useUserStore()
            userStore.logout()
            location.reload()
        }
    }
}
</script>
<style scoped lang="scss">
.el-table {
    --el-table-row-hover-bg-color: rgba(39, 137, 238, 0.1);
    --el-table-border-color: #e0e5f0;
}

:deep(.el-card.is-always-shadow) {
    box-shadow: 0 1px 14px 0 rgba(209, 224, 239, 0.6)
}

/* 拉框选中 */
.el-select-dropdown__item {
    height: 24px;
    line-height: 24px;
    font-size: 12px;
}

/* 鼠标经过下拉框 */
.el-select-dropdown__item:hover {
    height: 24px;
    line-height: 24px;
    font-size: 12px;
}

.el-select-dropdown__item.selected {
    color: #2789EE;
}

.span-txt {
    width: 100%;
    display: inline-block;
}

a {
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    color: #333333;
    font-size: 14px;
    margin-right: 5px;
    margin-left: 5px;
}

a:hover {
    color: #2789ee;
}
</style>
